<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #smallImg {
            width: 300px;
            height: 300px;
            background-image: url(./lou.jpg);
            background-size: cover;
        }
        #smallDiv {
            width: 100px;
            height: 100px;
            background-color: rgba(255, 0, 0, .2);
            display: none;
            position: absolute;
        }

        #bigDiv {
            width: 300px;
            height: 300px;
            /* border: 1px solid red; */
            position: absolute;
            left: 300px;
            top: 0px;
            overflow: hidden;
            display: none;
        }

        #bigImg {
            width: 900px;
            height: 900px;
            position: absolute;
        }
    </style>
</head>

<body>
    
    <div class="fang">
        <div id="smallImg">
            <div id="smallDiv"></div>
        </div>

        <div id="bigDiv">
            <img src="./lou.jpg" alt="" id="bigImg">
        </div>
    </div>


    <script>
        // 逻辑：
        // 1.鼠标移入，出现小div（遮挡层）和大div（展示效果区域）
        // 鼠标移出，隐藏小div、大div

        let smallImg = document.getElementById("smallImg");
        let smallDiv = document.getElementById("smallDiv");
        let bigDiv = document.getElementById("bigDiv");
        let bigImg = document.getElementById("bigImg");

        smallImg.onmouseover = function(){
            smallDiv.style.display = 'block';
            bigDiv.style.display = 'block';
        }
        smallImg.onmouseout = function(){
            smallDiv.style.display = 'none';
            bigDiv.style.display = 'none';
        }

        // 2.小div移动方向和大图移动方向是相反的
        // 2.1 先完成鼠标绑定遮挡层 
            // 鼠标移动距离大于 遮挡层的移动距离 
        // 2.2 把小div和大图移动 OK

        // 3.核心：整个放大镜功能存在一个比例
        //    小div/小图 = 大div/大图
        //    100 / 300  = 300 / 900
        // 分析：尺寸大小——>结论：3倍——>才是移动的距离

        smallImg.onmousemove = function(e){
            var e = e || window.event;
            // console.log(e.clientX,e.clientY);
            var x = e.clientX-50;
            var y = e.clientY-50;
            // 对移动范围进行判断
            if(x>=200){
                x=200;
            }
            if(x<=0){
                x=0;
            }
            if(y>=200){
                y=200;
            }
            if(y<=0){
                y=0;
            }

            // 小div移动距离
            smallDiv.style.left = x+'px';
            smallDiv.style.top = y+'px';
            
            // 大图移动距离
            bigImg.style.left = -3*x+'px';
            bigImg.style.top = -3*y+'px';
        }



    </script>

</body>

</html>